<template>
  <a-layout-header class="global-header">
    <div class="header-container">
      <!-- 左侧 Logo 和标题区域 -->
      <div class="header-left">
        <div class="logo-section">
          <img src="/xiaoguo.webp" alt="Logo" class="logo" />
          <span class="site-title">鱼皮 AI 零代码应用生成平台</span>
        </div>
      </div>
      
      <!-- 中间导航菜单区域 -->
      <div class="header-center">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="horizontal"
          class="header-menu"
          :items="menuItems"
          @click="handleMenuClick"
        />
      </div>
      
      <!-- 右侧用户操作区域 -->
      <div class="header-right">
        <a-space :size="16">
          <a-button type="text" class="help-btn">
            <template #icon>
              <QuestionCircleOutlined />
            </template>
            帮助
          </a-button>
          <a-button type="primary" @click="handleLogin">
            登录
          </a-button>
        </a-space>
      </div>
    </div>
  </a-layout-header>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import type { MenuProps } from 'ant-design-vue'

const router = useRouter()
const route = useRoute()

// 当前选中的菜单项
const selectedKeys = ref<string[]>([])

// 菜单配置 - 参考百度智能云妙搭的导航结构
const menuItems = computed<MenuProps['items']>(() => [
  {
    key: '/',
    label: '应用广场',
    title: '应用广场'
  },
  {
    key: '/generator',
    label: '应用生成',
    title: '应用生成'
  },
  {
    key: '/my-apps',
    label: '我的应用',
    title: '我的应用'
  },
  {
    key: '/about',
    label: '关于',
    title: '关于'
  }
])

// 处理菜单点击
const handleMenuClick = ({ key }: { key: string }) => {
  router.push(key)
}

// 处理登录按钮点击
const handleLogin = () => {
  console.log('登录功能待实现')
  // 这里可以打开登录弹窗或跳转到登录页面
}

// 监听路由变化，更新选中的菜单项
watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath]
  },
  { immediate: true }
)
</script>

<style scoped>
.global-header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 0;
  height: 64px;
  line-height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid #f0f0f0;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.header-left {
  display: flex;
  align-items: center;
  min-width: 280px;
}

.logo-section {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo {
  height: 36px;
  width: 36px;
  margin-right: 12px;
  border-radius: 6px;
}

.site-title {
  font-size: 18px;
  font-weight: 600;
  color: #1677ff;
  white-space: nowrap;
  background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 600px;
}

.header-menu {
  border-bottom: none;
  line-height: 64px;
  background: transparent;
}

.header-menu :deep(.ant-menu-item) {
  font-size: 15px;
  font-weight: 500;
  margin: 0 8px;
  padding: 0 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.header-menu :deep(.ant-menu-item:hover) {
  background-color: #f5f5f5;
  color: #1677ff;
}

.header-menu :deep(.ant-menu-item-selected) {
  background-color: #e6f4ff;
  color: #1677ff;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  min-width: 200px;
  justify-content: flex-end;
}

.help-btn {
  color: #666;
  font-size: 14px;
}

.help-btn:hover {
  color: #1677ff;
  background-color: #f5f5f5;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-container {
    padding: 0 16px;
  }
  
  .header-left {
    min-width: 240px;
  }
  
  .site-title {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .header-center {
    display: none;
  }
  
  .header-left {
    flex: 1;
  }
  
  .header-right {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 12px;
  }
  
  .site-title {
    display: none;
  }
  
  .logo-section {
    margin-right: 0;
  }
  
  .help-btn {
    display: none;
  }
}
</style>
